<template>
  <div class="box">
      <div class="hs-bg-title">
          焊接一车间
      </div>
    <!-- 上半部分盒子 -->
    <el-row style="margin-top: -60px;">
      <el-col :xl='16' :lg='16' :md='24' :sm='24' :xs='24'>
        <!-- 焊接生成中心 -->
        <div class="left-box" style="margin-top: -20px;">
          <div class="box">
            <div class="info">
              <div class="info-box" v-for="item in workstationList" :key="item.id">
                <div style="width:20px"></div>
                <div class="info-right">
                  <div class="info-right-title">
                    <img :src="item.src" style="cursor: pointer" class="info-right-img" @click="facinfo(item)">
                    <div class="info-right-name">{{item.workstationName}}</div>
                    <el-switch
                            disabled
                            v-model="item.switch"
                            active-color="#13ce66"
                            inactive-color="#ff4949">
                    </el-switch>
                  </div>
                  <table class="info-right-table" border="0" cellspacing="0" cellpadding="0">
                    <tr>
                      <th>设备编号</th>
                      <th><input type="text" class="hs-workstation-input" v-model="item.eqNum"></th>
                    </tr>
                    <tr>
                      <td>操作者</td>
                      <td>
                        <input type="text" v-model="item.operator1" class="hs-workstation-input" style="width: 33%;">
                        <input type="text" v-model="item.operator2" class="hs-workstation-input" style="width: 33%">
                        <input type="text" v-model="item.operator3" class="hs-workstation-input" style="width: 33%">
                      </td>
                    </tr>
                    <tr>
                      <td>产品名称</td>
                      <td>
                        <input type="text" v-model="item.pdNum1" class="hs-workstation-input" style="width: 33%;">
                        <input type="text" v-model="item.pdNum2" class="hs-workstation-input" style="width: 33%">
                        <input type="text" v-model="item.pdNum3" class="hs-workstation-input" style="width: 33%">
                      </td>
                    </tr>
                  </table>
                </div>
              </div>
            </div>
<!--            <div id="three" style="color:red;text-align:center;width:100%;height:100%;">显示区域</div>-->
            <!-- <div class="left-table-box" id="three"> -->
              <!-- 右箭头 -->
              <!-- <div class="left-table" v-for="(item,index) in 4" :key="index">
                <div @click="proxyImage">
                  <img src="../../assets/img/器具图标-焊机.png" alt="" class="left-table-img">
                </div>
                <img src="../../assets/img/right.png" alt="" class="left-table-right">
              </div> -->
              <!-- 左箭头 -->
              <!-- <div class="left-table" v-for="(item,index) in 4" :key="index">
                <img src="../../assets/img/器具图标-焊机(2).png" alt="" class="left-table-img">
                <img src="../../assets/img/left.png" alt="" class="left-table-right">
              </div> -->

            <!-- </div> -->

          </div>
        </div>
      </el-col>
      <el-col :xl='8' :lg='8' :xs='24' :md='24' :sm='24'>
        <!-- 焊接中心 -->
        <div class="right-box">
          <div class="right-title">
            <marquee style="width: 70%;padding: 0 20px;box-sizing: border-box;">{{warringmsg}}</marquee>
          </div>
          <div class="right-time">{{date}}</div>
          <div class="right-plan">
            <div class="right-plan-title">在线状态</div>
            <div class="right-plan-title">离线状态</div>
          </div>
          <div class="right-number">
            <div class="right-plan-num">{{online}}台</div>
            <div class="right-plan-num">{{9-online}}台</div>
          </div>
          <!--
          <div class="right-plan">
            <div class="right-plan-title">当天计划(件)</div>
            <div class="right-plan-title">实际执行</div>
          </div>
          <div class="right-number">
            <div class="right-plan-num">
              <input type="text" class="hs-workstation-input"
                     v-model="planNum"
                     style="font-size: 1em;width: 100%">
            </div>
            <div class="right-plan-num">323</div>
          </div>
          -->
          <div class=""></div>
          <div class="right-plan">
            <div class="right-length right-plan-title">焊接事件</div>
          </div>
          <div id='myCharts' style="margin-top: -30px;"></div>
          <div class="right-plan">
            <marquee class="right-length right-plan-title" style="margin-top: -30px;">焊接开始</marquee>
          </div>
          <div id='pieChart'></div>
        </div>
      </el-col>
    </el-row>

    <!-- 工位信息 -->

  </div>
</template>

<script>
import user from '../../mock/node.js'
export default {
  data () {
    return {
      //
      planNum: '110件',
      // 工作台列表
      workstationList: [
          {
              id: 1,
              src: require('../../assets/img/huhan.png'),
              workstationName: '工作站1',
              switch: false,
              eqNum: '设备编号001',
              operator1: '张三三',
              operator2: '李四三',
              operator3: '王二麻',
              pdNum1: '随即一',
              pdNum2: '随即二',
              pdNum3: '随即三',
              route: ''
          },
          {
              id: 2,
              src: require('../../assets/img/huhan.png'),
              workstationName: '工作站2',
              switch: false,
              eqNum: '设备编号002',
              operator1: '张三三',
              operator2: '李四三',
              operator3: '王二麻',
              pdNum1: '随即一',
              pdNum2: '随即二',
              pdNum3: '随即三',
              route: ''
          },
          {
              id: 3,
              src: require('../../assets/img/huhan.png'),
              workstationName: '工作站3',
              switch: false,
              eqNum: '设备编号003',
              operator1: '张三三',
              operator2: '李四三',
              operator3: '王二麻',
              pdNum1: '随即一',
              pdNum2: '随即二',
              pdNum3: '随即三',
              route: ''
          },
          {
              id: 4,
              src: require('../../assets/img/huhan.png'),
              workstationName: '工作站4',
              switch: false,
              eqNum: '设备编号004',
              operator1: '张三三',
              operator2: '李四三',
              operator3: '王二麻',
              pdNum1: '随即一',
              pdNum2: '随即二',
              pdNum3: '随即三',
              route: ''
          },
          {
              id: 5,
              src: require('../../assets/img/huhan.png'),
              workstationName: '工作站5',
              switch: false,
              eqNum: '设备编号005',
              operator1: '张三三',
              operator2: '李四三',
              operator3: '王二麻',
              pdNum1: '随即一',
              pdNum2: '随即二',
              pdNum3: '随即三',
              route: ''
          },
          {
              id: 6,
              src: require('../../assets/img/huhan.png'),
              workstationName: '工作站6',
              switch: false,
              eqNum: '设备编号006',
              operator1: '张三三',
              operator2: '李四三',
              operator3: '王二麻',
              pdNum1: '随即一',
              pdNum2: '随即二',
              pdNum3: '随即三',
              route: ''
          },
          {
              id: 7,
              src: require('../../assets/img/huhan.png'),
              workstationName: '工作站7',
              switch: false,
              eqNum: '设备编号007',
              operator1: '张三三',
              operator2: '李四三',
              operator3: '王二麻',
              pdNum1: '随即一',
              pdNum2: '随即二',
              pdNum3: '随即三',
              route: ''
          },
          {
              id: 8,
              src: require('../../assets/img/tujiao.png'),
              workstationName: '涂胶站1',
              switch: false,
              eqNum: '设备编号008',
              operator1: '张三三',
              operator2: '李四三',
              operator3: '王二麻',
              pdNum1: '随即一',
              pdNum2: '随即二',
              pdNum3: '随即三',
              route: ''
          },
          {
              id: 9,
              src: require('../../assets/img/tujiao.png'),
              workstationName: '涂胶站2',
              switch: false,
              eqNum: '设备编号009',
              operator1: '张三三',
              operator2: '李四三',
              operator3: '王二麻',
              pdNum1: '随即一',
              pdNum2: '随即二',
              pdNum3: '随即三',
              route: ''
          },
          {
              id: 10,
              src: require('../../assets/img/huhan.png'),
              workstationName: '备用站1',
              switch: false,
              eqNum: '设备编号010',
              operator1: '张三三',
              operator2: '李四三',
              operator3: '王二麻',
              pdNum1: '随即一',
              pdNum2: '随即二',
              pdNum3: '随即三',
              route: ''
          },
          {
              id: 11,
              src: require('../../assets/img/huhan.png'),
              workstationName: '备用站2',
              switch: false,
              eqNum: '设备编号011',
              operator1: '张三三',
              operator2: '李四三',
              operator3: '王二麻',
              pdNum1: '随即一',
              pdNum2: '随即二',
              pdNum3: '随即三',
              route: ''
          },
          {
              id: 12,
              src: require('../../assets/img/huhan.png'),
              workstationName: '备用站3',
              switch: false,
              eqNum: '设备编号012',
              operator1: '张三三',
              operator2: '李四三',
              operator3: '王二麻',
              pdNum1: '随即一',
              pdNum2: '随即二',
              pdNum3: '随即三',
              route: ''
          },
      ],
      addForm: {},
      dialogAddgsVisible: false,
      date: '',
      title:'',
      formLabelWidth:'',
      rules:'',
      value: '',
      path:"ws://localhost:8989/websocket",
      socket:"",
      online:0,
      warringmsg:"暂无报警信息",
      warringmsglist:["","","","","","","","","",""],
      carList:["black_car.png",
               "huhan.png",
               "green_car.png",
               "red_car.png",
               "yellow_car.png"],
      pielist:[{value: 9, name: '离线状态'},
               {value: 0, name: '在线状态'}
              ],
      serieslist:[0,0,0,0,0,0,0,0,0],   
    }
  },
  created () {
   
  },
  methods: {
    proxyImage: function () {
      this.dialogAddgsVisible = true
      this.title = '焊接设备详细数据'
    },
    closeDialogAddgsVisible: function () {

    },
    timeFormate: function (dt) {
      var yy = dt.getFullYear()
      var mm = dt.getMonth() + 1
      var dd = dt.getDate()
      var hh = dt.getHours()
      var mi = dt.getMinutes()
      var ss = dt.getSeconds()
      var dy = dt.getDay()
      var wk = '星期' + '日一二三四五六'.charAt(dy)
      var sd = '上午'
      if (hh > 12) {
        hh = hh - 12
        sd = '下午'
      }
      return yy + '年' + mm + '月' + dd + '日' + '  ' + wk + ' ' + sd + hh + ':' + mi + ':' + ss + ' '
    },
    drawStructe:function(){
    },
    clickFun:function(param){
      if (typeof param.seriesIndex == 'undefined') {
        return;
      }
      if (param.type == 'click') {
        this.$router.replace('/fac_info');
      }
    },
    facinfo:function(item){
      sessionStorage.setItem('operator', item.operator1 + ' ' + item.operator2 + ' ' + item.operator3);
      sessionStorage.setItem('workstationName', item.workstationName);
      this.goIndex('/fac_info?facid='+ (item.id-1))
    },
    webSocketInit: function () {
            if(typeof(WebSocket) === "undefined"){
                alert("您的浏览器不支持socket")
            }else{
                // 实例化socket
                this.socket = new WebSocket(this.path)
                // 监听socket连接
                this.socket.onopen = this.webSocketOpen
                // 监听socket错误信息
                this.socket.onerror = this.webSocketError
                // 监听socket消息
                this.socket.onmessage = this.getWebSocketMessage  
                // 监听socket关闭
                this.socket.onclose = this.closeWebSocket
            }
        },
        webSocketOpen: function () {
            console.log("socket连接成功")
        },
        webSocketError: function () {
            console.log("连接错误")
        },
        getWebSocketMessage: function (msg) {
            var that = this
            console.log(msg.data)
            var rest = JSON.parse(msg.data)

            // 工作站状态开关
            that.workstationList[rest.station].switch = rest.is_online == 1

            // 报警信息
            that.warringmsglist[rest.station] = rest.warring_msg
            var warmsg = ""
            var warlist = that.warringmsglist
            warlist.forEach(item =>{
              warmsg += item
            })
            if(that.warringmsg == ""){
              that.warringmsg = "暂无报警信息"
            }else{
              that.warringmsg = warmsg
            }

            // 在线离线状态
            var onlinecount = 0
            that.workstationList.forEach(item =>{
              if(item.switch){
                onlinecount++
              }
            })
            if(that.online != onlinecount){
              that.online = onlinecount

              // 饼状图
              that.pielist[1].value = onlinecount
              that.pielist[0].value = 9 - onlinecount
              var pieChart = this.$echarts.init(document.getElementById('pieChart'))
              var option = pieChart.getOption()
              option.series[0].data = that.pielist
              pieChart.setOption(option)
            }
            
            // 机械臂颜色变化
            that.workstationList[rest.station].src = require('../../assets/img/huhan.png')

            // 柱状图
            if(that.serieslist[rest.station] != rest.stand_number){
              that.serieslist[rest.station] = rest.stand_number
              var charts = this.$echarts.init(document.getElementById('myCharts'))
              var option = charts.getOption()
              option.series[0].data = that.serieslist
              charts.setOption(option)
            }
        },
        sendWebSocket: function () {
            this.socket.send("test")
        },
        closeWebSocket: function () {
            console.log("socket已经关闭")
        }
  },
  destroyed () {
        // 销毁监听
        this.socket.close()
  },
  mounted () {
        // websocket初始化
        this.webSocketInit()
        // TODO
        //    this.workstationList[1].src = require('../../assets/img/red_car.png')

    // ####################################################################################################################################################################### 
    var charts = this.$echarts.init(document.getElementById('myCharts'))
    const _this = this
    this.timer = setInterval(() => {
      _this.date = this.timeFormate(new Date())
    }, 1000)
    charts.setOption({
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'cross',
          crossStyle: {
            color: '#999'
          }
        }
      },
      xAxis: [
        {
          type: 'category',
          data: [
            '站1',
            '站2',
            '站3',
            '站4',
            '站5',
            '站6',
            '站7',
            '胶1',
            '胶2',
          ],
          axisPointer: {
            type: 'shadow'
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: '#1FA2AA'
            }
          }
        }
      ],
      yAxis: [{
           type: 'value',
           axisLabel: {
             formatter: '{value}',
             textStyle: {
               color: '#1FA2AA'
             }
            }
      },{}],
      // yAxis: [
      //   {
      //     type: 'value',
      //     min: 0,
      //     max: 24,
      //     interval: 50,
      //     axisLabel: {
      //       formatter: '{value} h',
      //       textStyle: {
      //         color: '#1FA2AA'
      //       }
      //     }
      //   },
      //   {
      //     type: 'value',
      //     min: 0,
      //     max: 24,
      //     interval: 5,
      //     axisLabel: {
      //       formatter: '{value} h',
      //       textStyle: {
      //         color: '#1FA2AA'
      //       }
      //     }
      //   }
      // ],
      series: [
        {
          name: '执行件数',
          type: 'bar',
          data: this.serieslist,
          itemStyle: {
            normal: {
              color: '#7CB4E5' // 设置所有柱状图颜色
            }
          }
        },
        // {
        //   name: '设备使用率',
        //   type: 'bar',
        //   data: [
        //     2.6,
        //     5.9,
        //     9.0,
        //     26.4,
        //     28.7,
        //     70.7,
        //     175.6,
        //     182.2,
        //     48.7,
        //     18.8,
        //     6.0,
        //     2.3
        //   ],
        //   itemStyle: {
        //     normal: {
        //       color: '#02DDFF' // 设置所有柱状图颜色
        //     }
        //   }
        // },
        // {
        //   name: '当日合格率',
        //   type: 'line',
        //   yAxisIndex: 1,
        //   data: [
        //     2.0,
        //     2.2,
        //     3.3,
        //     4.5,
        //     6.3,
        //     10.2,
        //     20.3,
        //     23.4,
        //     23.0,
        //     16.5,
        //     12.0,
        //     6.2
        //   ],
        //   itemStyle: {
        //     normal: {
        //       color: '#E9C20E' // 设置所有柱状图颜色
        //     },
        //     lineStyle: {
        //       color: '#000000'
        //     }
        //   }
        // }
      ]
    })

    let pieChart = this.$echarts.init(document.getElementById('pieChart'))
    pieChart.setOption({
      series: [
        {
          name: '机器状态',
          type: 'pie',
          radius: '75%',
          data: this.pielist,
          label: {
            normal: {
              show: true,
              formatter: '{b}: {c}'
            }
          },
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          },
          itemStyle: {
            	emphasis: {
            		shadowBlur: 10,
            		shadowOffsetX: 0,
            		shadowColor: 'rgba(0, 0, 0, 0.5)'
            	},
            	normal:{
            		color:function(params) {
            		//自定义颜色
            		var colorList = ['#B95656','#398C4B'];
            			return colorList[params.dataIndex]
            		}
            	}
            },
        }
      ]
    })
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
.box {
  background-image: url('../../assets/img/hs_bg_home.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  height: 100%;
  overflow: auto;
}
.hs-workstation-input{
  border: none;
  color: white;
  background: transparent!important;
  text-align: center;
}
.hs-bg-title{
  color: #e1e1e1;
  text-align: center;
  width: 100%;
  font-size:40px;
  text-shadow: .5rem 0rem .5rem #344b65,-.5rem 0rem .5rem #344b65,0rem .2rem .5rem #344b65,0rem -.2rem .5rem #344b65;
  padding-top: 20px;
  letter-spacing:10px;
}
// 当屏幕尺寸大于1920px时
@media screen and (min-width: 1920px) {
  .left-box {
    .box {
      background-image: url('../../assets/img/index-1.png');
      margin: 100px 0 0 20px;
      background-repeat: no-repeat;
      background-size: 100% 100%;
      height: 100%;
      .left-title {
        position: relative;
        margin: 20px 0 0 40px;
        color: #1bc2e7;
        background: #062330;
        display: inline-block;
        text-align: center;
        width: 10em;
        font-size: 1em;
        height: 1.5em;
        line-height: 1.5em;
        border-radius: 2px;
      }

      .left-title:before {
        content: '';
        background: #25a9c5;
        width: 2px;
        height: 20px;
        border-radius: 4px;
        position: absolute;
        left: -10px;
      }

      .left-table-box {
        display: flex;
        flex-wrap: wrap;
        margin-left: 4em;
        margin-top: 20px;

        .left-table {
          width: 25%;
          display: flex;
          align-items: center;
          margin-bottom: 50px;

          .left-table-img {
            width: 10em;
            height: 8em;
          }

          .left-table-right {
            width: 80px;
            margin-left: 6px;
          }
        }
      }
    }
  }

  .right-box {
    margin-top: 80px;

    .right-title {
      text-align: right;
      line-height: 70px;
      background-image: url('../../assets/img/index-2.png');
      background-repeat: no-repeat;
      background-size: 100% 100%;
      color: #4b74b8;
      height: 70px;
      width: 380px;
      margin: 0 auto;
    }

    .right-title:first-child {
      font-size: 1.5em;
      /*text-shadow: #d4e68a 1px 2px 4px;*/
      /*color: lightsteelblue;*/
      color: red;
    }

    .right-time {
      margin: 0 auto;
      text-align: center;
      width: 380px;
      border: 2px solid #23adca;
      background: #07252d;
      border-radius: 4px;
      color: #23adca;
      font-size: 18px;
      line-height: 30px;
      height: 30px;
      margin-top: 20px;
    }

    .right-plan {
      display: flex;
      width: 380px;
      margin: 20px auto;
      justify-content: space-between;
      color: #dbf7ff;

      .right-plan-title {
        position: relative;
        margin-left: 10px;
        color: #dbf7ff;
        background: #062330;
        display: inline-block;
        text-align: center;
        width: 10em;
        font-size: 1em;
        height: 1.5em;
        line-height: 1.5em;
        border-radius: 2px;
      }

      .right-plan-title:before {
        content: '';
        background: #25a9c5;
        width: 2px;
        height: 20px;
        border-radius: 4px;
        position: absolute;
        left: -10px;
      }
    }

    .right-number {
      display: flex;
      color: #fff;
      font-size: 24px;
      width: 380px;
      margin: 0 auto;

      .right-plan-num {
        width: 50%;
        text-align: center;
      }

      .right-plan-num:first-child {
        color: #0bbdd5;
      }
    }

    .right-length {
      border: 2px solid #175c64;
    }
  }

  #myCharts, #pieChart {
    width: 380px;
    height: 200px;
    margin: 0 auto;
  }
}

// 当屏幕尺寸大于等于1200px时
@media screen and (min-width: 1200px) and (max-width: 1919px) {
  .left-box {
    .box {
      background-image: url('../../assets/img/index-1.png');
      margin: 100px 0 0 20px;
      background-repeat: no-repeat;
      background-size: 100% 100%;
      height: 100%;

      .left-title {
        position: relative;
        margin: 20px 0 0 40px;
        color: #1bc2e7;
        background: #062330;
        display: inline-block;
        text-align: center;
        width: 10em;
        font-size: 1em;
        height: 1.5em;
        line-height: 1.5em;
        border-radius: 2px;
      }

      .left-title:before {
        content: '';
        background: #25a9c5;
        width: 2px;
        height: 20px;
        border-radius: 4px;
        position: absolute;
        left: -10px;
      }

      .left-table-box {
        display: flex;
        flex-wrap: wrap;
        margin-left: 4em;
        margin-top: 20px;

        .left-table {
          width: 25%;
          display: flex;
          align-items: center;
          margin-bottom: 50px;

          .left-table-img {
            width: 64%;
            height: 8em;
          }

          .left-table-right {
            width: 30%;
            margin-left: 6px;
          }
        }
      }
    }
  }

  .right-box {
    margin-top: 80px;

    .right-title {
      text-align: right;
      line-height: 70px;
      background-image: url('../../assets/img/index-2.png');
      background-repeat: no-repeat;
      background-size: 100% 100%;
      color: #4b74b8;
      height: 70px;
      width: 80%;
      margin: 0 auto;
    }

    .right-title:first-child {
      font-size: 1.5em;
      text-shadow: #d4e68a 1px 2px 4px;
      color: lightsteelblue;
    }

    .right-time {
      margin: 0 auto;
      text-align: center;
      width: 80%;
      border: 2px solid #23adca;
      background: #07252d;
      border-radius: 4px;
      color: #23adca;
      font-size: 18px;
      line-height: 30px;
      height: 30px;
      margin-top: 20px;
    }

    .right-plan {
      display: flex;
      width: 80%;
      margin: 20px auto;
      justify-content: space-between;
      color: #dbf7ff;

      .right-plan-title {
        position: relative;
        margin-left: 10px;
        color: #dbf7ff;
        background: #062330;
        display: inline-block;
        text-align: center;
        width: 10em;
        font-size: 1em;
        height: 1.5em;
        line-height: 1.5em;
        border-radius: 2px;
      }

      .right-plan-title:before {
        content: '';
        background: #25a9c5;
        width: 2px;
        height: 20px;
        border-radius: 4px;
        position: absolute;
        left: -10px;
      }
    }

    .right-number {
      display: flex;
      color: #fff;
      font-size: 24px;
      width: 80%;
      margin: 0 auto;

      .right-plan-num {
        width: 50%;
        text-align: center;
      }

      .right-plan-num:first-child {
        color: #0bbdd5;
      }
    }

    .right-length {
      border: 2px solid #175c64;
    }
  }

  #myCharts {
    width: 80%;
    height: 200px;
    margin: 0 auto;
  }
}

// 当屏幕尺寸大于等于992px时
@media screen and (min-width: 992px) and (max-width: 1199px) {
}

// 当屏幕尺寸大于等于768px时
@media screen and (min-width: 768px) and (max-width: 991px) {
}

// 当屏幕尺寸小于768px时
@media screen and (max-width: 767px) {
}

.top-box:after {
  content: '';
  clear: both;
  display: block;
  height: 0;
}

.info {
  padding-bottom: 100px;
  display: flex;
  margin-top: 20px;
  flex-wrap: wrap;

  .info-box {
    display: flex;
    padding: 10px;

    .info-left {
      width: 100px;
      color: #fff;
      text-align: center;
      font-size: 12px;

      .station-title {
        width: 80px;
        border: 2px solid #17adca;
        background: #07252d;
        border-radius: 4px;
        margin: 14px auto;
      }

      .station-text {
        margin: 0 auto 10px 0;
      }

      .station-info {
        display: flex;
        align-items: center;
        justify-content: center;

        .station-state {
          border-radius: 50%;
          background: #17d9a1;
          width: 12px;
          height: 12px;
          margin-right: 10px;
        }

        .station-state-title {
          color: #4ba7be;
        }
      }
    }

    .info-right {
      .info-right-title {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 280px;
        .info-right-name {
          position: relative;
          background: #062330;
          display: inline-block;
          text-align: center;
          width: 120px;
          font-size: 14px;
          height: 24px;
          line-height: 24px;
          border-radius: 4px;
          color: #fff;
          margin-left: 20px;
          border: 2px solid #175c64;
        }

        .info-right-name:before {
          content: '';
          background: #25a9c5;
          width: 2px;
          height: 24px;
          border-radius: 4px;
          position: absolute;
          left: -10px;
        }

        .info-right-img {
          height: 40px;
          width: 40px;
        }
      }

      .info-right-table {
        color: #2286a2;
        text-align: center;
        font-size: 12px;
        width: 300px;
        height: 100px;
        margin-top: 10px;
      }

      th {
        background: #082b3f;
        border: 1px solid #1a4650;
      }

      th:first-child {
        width: 200px;
        border-right: 0;
      }

      td {
        border: 1px solid #1a4650;
        border-top: 0;
      }

      td:first-child {
        border-right: 0;
      }
    }
  }
}
</style>

<style lang="less" scope>
    .hs-formBg{
        .el-dialog{
            .el-dialog__header, .el-dialog__body, .el-dialog__footer{
                background: #17212d;
            }
            .el-dialog__header{
                .el-dialog__title{
                    color:  white;
                }
            }
            .el-form-item__label{
                color: white
            }
            .el-input__inner{
                background-color: #17212d;
                border: 1px solid #17adca;
                color: white;
            }
            /*.el-dialog__body{*/
            /*    */
            /*}*/
        }
    }
</style>
